<template>
  <view>
    <nav-bar-img :title="storeInfo.navTitle" :iconUrl="storeInfo.navIconUrl" />
    <view class="content">
      <view @click="jumpPages('userInfo')" class="row-box userInfo">
        <view class="headPic"><xh-img :src="userData.headPic" /></view>
        <view class="info">
          <view class="top">
            <view class="name">{{ userData.name }}</view>
            <view v-if="userData" class="task">{{ userData.role }}</view>
          </view>
          <view v-if="userData.phone" class="btm">{{
            userData.phone.substring(0, 3) +
            "****" +
            userData.phone.substr(userData.phone.length - 4)
          }}</view>
        </view>
        <!-- <view class="iconfont icon-xiangyoujiantou"></view> -->
      </view>
      <view class="row-box">
        <block v-for="(item, index) in funList" :key="index" class="row">
          <view
            v-if="item.path !== 'KF' && item.show"
            @click="jumpPages(item.path)"
            class="row"
          >
            <view :class="item.icon" class="icon iconfont"></view>
            <view class="info">{{ item.title }}</view>
            <view
              v-if="item.jiantou"
              class="iconfont icon-xiangyoujiantou"
            ></view>
          </view>
          <view v-else-if="item.path === 'KF'" class="row">
            <button open-type="contact">
              <view :class="item.icon" class="icon iconfont"></view>
              <view class="info">{{ item.title }}</view>
              <view
                v-if="item.jiantou"
                class="iconfont icon-xiangyoujiantou"
              ></view>
            </button>
          </view>
        </block>
      </view>
    </view>
    <view @click="outLogin" class="outLogin"
      ><u-button type="primary" text="退出当前账户"></u-button
    ></view>
    <confirm-modal
      v-if="confirmModal.show"
      :title="confirmModal.title"
      :content="confirmModal.content"
      :confirmText="confirmModal.confirmText"
      :cancelText="confirmModal.cancelText"
      :showCancelButton="confirmModal.showCancelButton"
      :confirmTextColor="confirmModal.confirmTextColor"
      :cancelTextColor="confirmModal.cancelTextColor"
      :confirmBgColor="confirmModal.confirmBgColor"
      :cancelBgColor="confirmModal.cancelBgColor"
      @getConfirmModal="getConfirmModal"
    ></confirm-modal>
    <cus-tab-bar />
  </view>
</template>

<script>
import themeColor from "@/const/theme";
import navBarImg from "@/components/baseComponents/nav-bar-img/index.vue";
import { getShopsBy } from "@/service/api/sp-store/index.js";
import { mapState } from "vuex";
export default {
  components: { navBarImg },
  props: {
    headPic: {
      default:
        "https://hyyxboss.oss-cn-shenzhen.aliyuncs.com//img/pub/no_data.png",
    },
  },
  computed: {
    ...mapState("sp-common/auth", ["pubUserInfo"]),
    ...mapState("sp-store/index", ["shopsByInfo"]),
  },
  data() {
    return {
      /* 商户 */
      storeInfo: "",
      /* 用户 */
      userData: "",
      /* 功能 */
      funList: {
        storeSetup: {
          icon: "icon-shezhi",
          title: "门店设置",
          path: "storeSetup",
          jiantou: false,
          show: true,
        },
        KF: {
          icon: "icon-kefu",
          title: "平台客服",
          path: "KF",
          type: "contact",
          jiantou: false,
          show: true,
        },
        switchStore: {
          icon: "icon-qiehuan",
          title: "切换门店",
          path: "switchStore",
          jiantou: true,
          show: false,
        },
        about: {
          icon: "icon-guanyu_o",
          title: "关于我们",
          path: "about",
          jiantou: true,
          show: true,
        },
      },
      /* 退出登陆弹窗 */
      confirmModal: {
        show: false,
        title: "提示",
        content: "是否确定退出当前账户？",
        confirmText: "否",
        cancelText: "是",
        showCancelButton: true,
        confirmTextColor: themeColor.themeColor.info,
        cancelTextColor: "",
        confirmBgColor: themeColor.themeColor.primary,
        cancelBgColor: themeColor.themeColor.info,
      },
    };
  },
  mounted() {
    this.initFun();
  },
  methods: {
    initFun() {
      Promise.all([this.initUserData()]).finally(() => {
        this.getShopsByFun();
      });
    },
    // 格式化
    initUserData() {
      return new Promise((resolve) => {
        // 用户信息
        let { name, mobilePhone, avatar, loginRoleName } = this.pubUserInfo;
        let { shopName, logo } = this.pubUserInfo.pubDomainShopVo;
        let userData = {
          name: name,
          phone: mobilePhone,
          role: loginRoleName,
          headPic: avatar,
        };
        this.userData = userData;
        // 商户信息
        let storeInfo = {
          navTitle: shopName,
          navIconUrl: logo,
        };
        this.storeInfo = storeInfo;
        resolve();
      });
    },
    // 跳转
    jumpPages(path) {
      this.$Router.push({
        name: path,
        params: {
          userData: this.userData,
        },
      });
    },
    // 退出登录
    outLogin() {
      this.confirmModal.show = true;
    },
    getConfirmModal(val) {
      this.confirmModal.show = false;
      if (val === "cancel") {
        this.$Router.replaceAll({
          path: "/pages/sp-common/pages/login/index",
        });
      }
    },
    // 获取可切换门店
    getShopsByFun() {
      let params = { mobilePhone: this.userData.phone };
      getShopsBy(params).then((res) => {
        if (res.length > 1) {
          this.funList["switchStore"].show = true;
          this.$store.commit("sp-store/index/SET_SHOPSBY_INFO", res);
        }
      });
    },
  },
};
</script>
<style>
page {
  background-color: #f1f1f1;
}
</style>
<style scoped lang="scss">
.content {
  padding: 20rpx;
  box-sizing: border-box;
  .row-box {
    width: 100%;
    overflow: hidden;
    background-color: white;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    align-items: center;
    .row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx 18rpx;
      border-bottom: 1rpx solid #ececec;
      box-sizing: border-box;

      .icon {
        font-size: 38rpx;
      }
      .info {
        flex: 1;
        font-size: 30rpx;
        padding-left: 8rpx;
        box-sizing: border-box;
      }
      button {
        width: 100%;
        padding: 0;
        outline: none;
        border-radius: 0;
        background-color: transparent;
        line-height: inherit;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
      }
      button::after {
        border: none;
      }
      &:first-child {
        margin-top: 0;
      }
      &:last-child {
        margin-bottom: 0;
        border: none;
      }
    }
  }
  .userInfo {
    display: flex;
    justify-content: space-between;
    padding: 24rpx;
    .headPic {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      overflow: hidden;
    }
    .info {
      flex: 1;
      margin-left: 28rpx;
      .top {
        display: flex;
        align-items: center;
        .name {
          float: left;
          font-weight: bold;
          width: 400rpx;
          font-size: 36rpx;
        }
        .task {
          float: left;
          padding: 8rpx 24rpx;
          box-sizing: border-box;
          margin-left: 16rpx;
          border-radius: 20rpx;
          font-size: 24rpx;
          background-color: $u-primary;
          color: white;
          //width: 120rpx;
          text-align: center;
        }
      }
      .btm {
        margin-top: 18rpx;
        font-size: 28rpx;
        color: #13131380;
      }
    }
  }
}
.outLogin {
  width: 600rpx;
  margin: 50rpx auto;
  overflow: hidden;
}
.icon-xiangyoujiantou {
  color: #c0c0c0;
  font-size: 19rpx;
}
</style>
